<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="item in letter":key="item">{{item}}</li>
  </ul>
  <button @click="btnClick" >添加</button>
</div>
  <script src="../../project_practice/lunbotu/vue.js"></script>
  <script>
    const app = new Vue({
      el:'#app',
      data:{
        message:"你好啊！！",
        letter:['a','b','c','d','e']
      },
      methods:{
        btnClick() {
          //1.push方法:往最后加一个元素,可以加多个元素
          //this.letter.push('aaa','bbb','ccc')
          //2.通过索引值修改数组中的元素
          //pop方法:删除数组中最后一个元素
          //this.letter.pop();
          //3.shift():删除数组中的第一个元素
          //this.letter.shift();
          //4.unshift():在数组最前面添加元素，可以加多个元素
          //this.letter.unshift('aaa')
          //5.splice作用:删除元素/插入元素/替换元素
          //删除元素：第二个参数传入你要删除几个元素（如果没有传，就删除后面所有的元素）
          //替换元素：第二个参数，表示我们要替换几个元素，后面是用于替换前面所有的元素
          //插入元素：第二个参数，传入0，并且后面跟上要插入的元素
          //splice(start)
          //splice(start)：
          //this.letter.splice(1,3,'m','n','l')
          this.letter.splice(2,0,'m')
        }
      }
    })
  </script>
</body>
</html>